import 'package:flutter/material.dart';
import 'package:top_foundation/utils/theme/theme.dart';

import '../../../../helper/utils/util.dart';

class LoginField extends StatefulWidget {
  const LoginField({
    Key? key,
    required this.controller,
    required this.title,
    this.placeholder,
    this.isPwd = false,
    this.padding = EdgeInsets.zero,
    this.errText,
    this.onChange,
    this.titleColor,
    this.onEditingComplete,
    this.focusNode,
  }) : super(key: key);
  final TextEditingController controller;
  final String title;
  final String? placeholder;
  final bool isPwd;
  final EdgeInsets padding;
  final String? errText;
  final Function(String)? onChange;
  final Color? titleColor;
  final VoidCallback? onEditingComplete;
  final FocusNode? focusNode;
  @override
  State<LoginField> createState() => _LoginFieldState();
}

class _LoginFieldState extends State<LoginField> {
  bool isEditing = false;
  bool isObscureText = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: widget.padding,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            widget.title,
            style: TextStyle(
              color: widget.titleColor ?? const Color(0xff333333),
              fontSize: 20.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(
            height: 50.r,
            child: TextField(
              focusNode: widget.focusNode,
              controller: widget.controller,
              scrollPadding: EdgeInsets.zero,
              maxLines: 1,
              textAlignVertical: TextAlignVertical.center,
              obscureText: widget.isPwd && isObscureText,
              onTap: () {
                if (widget.onChange != null) {
                  widget.onChange!('');
                }
              },
              onEditingComplete: widget.onEditingComplete,
              onChanged: (value) {
                var isNotEmpty = widget.controller.text.isNotEmpty;
                if (isEditing != isNotEmpty) {
                  isEditing = isNotEmpty;
                  setState(() {});
                }
                if (widget.onChange != null) {
                  widget.onChange!(value);
                }
              },
              decoration: InputDecoration(
                errorText: widget.errText,
                hintText: widget.placeholder,
                hintStyle: TextStyle(
                  color: ColorsUtil.placeholder,
                  fontSize: 14.sp,
                ),
                labelStyle:
                    TextStyle(color: const Color(0xff333333), fontSize: 14.sp),
                border: UnderlineInputBorder(
                  borderSide: ITheme.borderSide,
                ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: ITheme.borderSide,
                ),
                focusedBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(
                  color: ColorsUtil.blue,
                  width: 0.5,
                )),
                errorBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(
                  color: Colors.red,
                  width: 0.5,
                )),
                isCollapsed: true,
                suffixIcon: !isEditing
                    ? SizedBox(
                        height: 40.r,
                      )
                    : InkWell(
                        onTap: () {
                          if (widget.isPwd) {
                            setState(() {
                              isObscureText = !isObscureText;
                            });
                          } else {
                            widget.controller.clear();

                            setState(() {
                              isEditing = false;
                            });
                          }
                        },
                        child: Container(
                          width: 44.r,
                          height: 40.r,
                          padding: EdgeInsets.only(right: 10.r),
                          alignment: Alignment.centerRight,
                          child: Icon(
                            widget.isPwd
                                ? (isObscureText
                                    ? IconUtil.eye_close
                                    : Icons.remove_red_eye)
                                : Icons.close,
                            color: const Color(0xff999999),
                            size: 25.r,
                          ),
                        )),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
